---
import ContainedSection from "#/components/ContainedSection.astro"
import Layout from "#/layouts/Layout.astro"
import type { BlogPost } from "#/lib/types.ts"
import { toISODate, saneDateTime } from "#/lib/utilities.ts"
import { contentfulClient } from "#/lib/contentful/client.ts"
import { ContentfulLivePreview } from "@contentful/live-preview"
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"

export const prerender = false

const { slug } = Astro.params

const {
  items: [blogPost]
} = await contentfulClient.getEntries<BlogPost>({
  limit: 1,
  "fields.slug": slug,
  content_type: "blog",
  select: [
    "sys.id", // entry id
    "fields.date",
    "fields.slug",
    "fields.title",
    "fields.cover",
    "fields.author",
    "fields.hidden",
    "fields.content",
    "fields.description"
  ]
})

// The browser should always check freshness
Astro.response.headers.set("cache-control", "public, max-age=0, must-revalidate")

const imageWithProtocol = (url: string) => `https:${url}`

const entryId = blogPost.sys.id

// @ts-expect-error
const coverFields = blogPost.fields.cover.fields
const imageUrl = imageWithProtocol(coverFields.file.url)
---

<Layout
  image={imageUrl}
  url={Astro.url.href}
  title={blogPost.fields.title}
  description={blogPost.fields.description}
>
  <ContainedSection className="flex flex-col pt-4">
    <div class="max-w-2xl self-center md:text-lg text-gray-300">
      <h1
        data-contentful-field-id="title"
        data-contentful-entry-id={entryId}
        class="text-white text-3xl sm:text-4xl font-bold mb-0 font-supermolot uppercase"
        {...ContentfulLivePreview.getProps({ entryId, fieldId: "title" })}
      >
        {blogPost.fields.title}
      </h1>
      <div class="flex gap-x-3 mt-1.5 font-bold">
        <time
          class="text-lg font-mono text-accent-500 font mono"
          data-contentful-field-id="date"
          data-contentful-entry-id={entryId}
          datetime={toISODate(blogPost.fields.date)}
          {...ContentfulLivePreview.getProps({ entryId, fieldId: "date" })}
        >
          {saneDateTime(blogPost.fields.date)}
        </time>
        <p
          class="m-0 font-lg font-mono uppercase"
          data-contentful-field-id="author"
          data-contentful-entry-id={entryId}
          {...ContentfulLivePreview.getProps({ entryId, fieldId: "author" })}
        >
          {blogPost.fields.author}
        </p>
      </div>
      <img
        class="my-3"
        loading="eager"
        alt={coverFields.title}
        data-contentful-field-id="cover"
        data-contentful-entry-id={entryId}
        src={`${imageUrl}?fit=fill&f=center&fm=avif&w=1344&h=706`}
        {...ContentfulLivePreview.getProps({ entryId, fieldId: "cover" })}
      />
      <p>
        <em
          class="hidden"
          data-contentful-entry-id={entryId}
          data-contentful-field-id="description"
          {...ContentfulLivePreview.getProps({
            entryId,
            fieldId: "description",
          })}
        >
          {blogPost.fields.description}
        </em>
      </p>
      <article
        class="font-mono"
        data-contentful-field-id="content"
        data-contentful-entry-id={entryId}
        set:html={documentToHtmlString(blogPost.fields.content)}
        {...ContentfulLivePreview.getProps({ entryId, fieldId: "content" })}
      />
    </div>
  </ContainedSection>
</Layout>

<script>
  import { initializeContentfulLivePreview } from "#/lib/contentful/functions.ts";

  const subscriptions: Array<VoidFunction> = [];

  document.addEventListener("DOMContentLoaded", async (event) => {
    const emElement = document.querySelector("h1[data-contentful-entry-id]");
    const entryId = emElement?.dataset.contentfulEntryId;
    if (!entryId) return;
    initializeContentfulLivePreview({
      entryId,
      subscriptions,
      locale: "en-US",
      debugMode: import.meta.env.MODE === "development",
      fields: ["date", "title", "cover", "author", "content", "description"],
    });
  });
</script>

<script is:inline type="module" src="/scripts/anchor-targets.js"></script>

<script is:inline type="module" src="/scripts/scroll-to-anchor.js"></script>

<style is:inline lang="postcss">
  ol {
    margin-left: 2rem;
    list-style-type: decimal;
    & li > ol {
      margin-bottom: 0.25rem;
      list-style-type: lower-alpha;
      & li > ol {
        list-style-type: lower-roman;
        margin-bottom: 0rem;
      }
    }
    & li > p {
      margin-bottom: 0;
    }
  }

  blockquote {
    border-left: 2px solid #a0dbfdd3;
    padding-left: 1.5rem;
    margin-left: 0;
  }

  img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  p > a, ul a:not(header a), ol a:not(header a) {
    text-decoration: underline;
    text-decoration-color: #A0ECFD !important;
    transition: border-bottom-color 0.2s ease-in-out;
    color: #A0ECFD !important;
  }

  p, q, blockquote {
    margin-bottom: 1rem;
    color: #D1D5DB;
  }

  p > a:hover {
    color: #A0ECFD;
  }

  ol, ul {
    li {
      color: #D1D5DB;
    }
    margin-bottom: 1rem;
  }
  @media (max-width: 640px) {
    p > a:hover {
      color: #A0ECFD;
      text-decoration-color: #fff !important;
    }
    h2 {
      font-size: 1.5rem !important;
    }
  }

  h2,h3,h4,h5 {
    font-family: "Supermolot";
    font-weight: bold;
    text-transform: uppercase;

    margin-top: 3rem;
    margin-bottom: 0.5rem;
    font-size: 1.87rem;
    color: #ffffff;
  }

  h2::after, h3::after, h4::after, h5::after {
    content: "#";
    color: #ffffff;
    margin-left: 0.5rem;
    font-size: 1.5rem;
    position: relative;
    visibility: hidden;
  }

  h2:hover::after, h3:hover::after, h4:hover::after, h5:hover::after {
    visibility: visible;
  }

  *::selection {
    background-color: #A0ECFD;
    color: #000;
  }
</style>
